<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: LiuYan
 * @LastEditTime: 2022-12-21 11:39:21
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <script
      src="./common/js/jquery-1.7.2.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <title>新建合同</title>
  </head>

  <body>
    <div class="contractList_dialog" id="contractList_dialog">
      <div class="dialogAddTable">
        <div class="dialogAddTable_itemBox">
          <!-- 下拉 一整行 -->
          <div class="itemAddBox itemAddBox_col_12 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>合同类型</div>
            <div class="itemAddBox_input">
              <div class="select-group">
                <div class="options">
                  <input prop="name1" placeholder="输入关键字" />
                  <ul>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- 输入框  半行 -->
          <div class="itemAddBox itemAddBox_col_6 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>合同名称</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name2" placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <!-- 输入框  半行 -->
          <div class="itemAddBox itemAddBox_col_6 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>合同编号</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name3" placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <!-- 输入框  半行 右侧带checkbox -->
          <div class="itemAddBox itemAddBox_col_6 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>合同名称</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input placeholder="输入关键字" />
                <div class="input-group_slotCheckbox">
                  <input prop="name4" class="checkbox" type="checkbox" />
                  <label>我方</label>
                </div>
              </div>
            </div>
          </div>
          <!-- 输入框  半行 右侧带checkbox -->
          <div class="itemAddBox itemAddBox_col_6 itemAddBox_line">
            <div class="itemAddBox_tips"><span>*</span>合同编号</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name5" placeholder="输入关键字" />
                <div class="input-group_slotCheckbox">
                  <input prop="name55" class="checkbox" type="checkbox" />
                  <label>我方</label>
                </div>
              </div>
            </div>
          </div>
          <!-- 下拉 半行 -->
          <div class="itemAddBox itemAddBox_col_6">
            <div class="itemAddBox_tips"><span>*</span>经办人</div>
            <div class="itemAddBox_input">
              <div class="select-group">
                <div class="options">
                  <input prop="name6" placeholder="输入关键字" />
                  <ul>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_col_6">
            <div class="itemAddBox_tips"><span>*</span>经办人</div>
            <div class="itemAddBox_input">
              <div class="select-group">
                <div class="options">
                  <input prop="name7" placeholder="输入关键字" />
                  <ul>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                    <li>输入关键字</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogAddTable_Desc">
          <span>*</span>合同金额： 合计 12,000,000.00
        </div>
        <div class="dialogAddTable_itemBox_bg">
          <div class="itemAddBox itemAddBox_col_6">
            <div class="itemAddBox_tips">设备费：</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name8" placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_col_6">
            <div class="itemAddBox_tips">施工费：</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name9" placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_col_6">
            <div class="itemAddBox_tips">施工费：</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name10" placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_col_6">
            <div class="itemAddBox_tips">施工费：</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name11" placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_col_12">
            <div class="itemAddBox_tips">施工费：</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name12" placeholder="输入关键字" />
              </div>
            </div>
          </div>
        </div>
        <div class="dialogAddTable_Desc">
          <span>*</span>收款情况：已回款 12,000,000.00 未回款 0.00 回款比例 100%
        </div>
        <div class="dialogAddTable_itemBox_bg">
          <div class="itemAddBox itemAddBox_col_6">
            <div class="itemAddBox_tips">设备费：</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name13" placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_col_6">
            <div class="itemAddBox_tips">施工费：</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <input prop="name14" placeholder="输入关键字" />
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_textarea itemAddBox_col_12">
            <div class="itemAddBox_tips">施工费：</div>
            <div class="itemAddBox_input">
              <div class="input-group">
                <textarea
                  name="textarea"
                  id=""
                  rows="3"
                  placeholder="请输入..."
                ></textarea>
              </div>
            </div>
          </div>
          <div class="itemAddBox itemAddBox_uploadButton itemAddBox_col_12">
            <div class="itemAddBox_tips">发票：</div>
            <div class="itemAddBox_input">
              <button class="button_success_plain" id="invUpload">
                <img src="./common/img/upload.png" width="16px" height="16px" />
                <input class="uploadFile" prop="file1" />上传发票
              </button>
              <p id="onUploadText"></p>
            </div>
          </div>
          <div class="delete">
            <img
              src="./common/img/delete.png"
              width="32px"
              height="32px"
              alt=""
            />
          </div>
        </div>
        <div class="dialogAddTable_add">
          <img
            src="./common/img/add.png"
            width="16px"
            height="16px"
            alt=""
          />新增收款
        </div>
        <div class="dialogAddTable_dragUploadFile">
          <div class="dialogAddTable_Desc"><span>*</span>上传附件</div>
          <div class="dialogAddTable_dragFile" id="accessoryUpload">
            <img
              src="./common/img/dragUpload.png"
              width="36px"
              height="30px"
              alt=""
            />
            <div><span>点击</span>或将文件拖拽到这里上传</div>
            <input prop="file2" class="dragFile" />
          </div>
          <div class="dragFile_desc">
            支持扩展名：.rar .zip .doc .docx .pdf .jpg...
          </div>
          <div class="dragFileList">
            <div class="item_dragFile">
              <div class="leftFileName">
                <img
                  src="./common/img/file_icon.png"
                  width="17px"
                  height="20px"
                  alt=""
                />
                <div class="fileName">资料资料资料资料资料资料资料资料.pdf</div>
                <div class="fileSize">234kb</div>
              </div>
              <div class="fileAction">
                <img
                  class="fileSuccess"
                  src="./common/img/file_success.png"
                  width="16px"
                  height="16px"
                  alt=""
                />
                <img
                  class="fileDelete"
                  src="./common/img/file_delete.png"
                  width="11px"
                  height="11px"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="module">
    import PropsForm from "./common/js/propsForm.js";
    function save() {
      let propForm = new PropsForm({
        el: document.querySelector("#contractList_dialog"),
      });
      return propForm.form;
    }
    document.querySelector("#accessoryUpload").addEventListener("click", () => {
      upload((val) => {
        const filePath = val.target.files[0];
        const formData = new FormData();
        formData.append("file", filePath);
        // ajax之后在赋值
        document.querySelector("input[prop=file2]").value = filePath.name;
      });
    });
    document.querySelector("#invUpload").addEventListener("click", () => {
      upload((val) => {
        const filePath = val.target.files[0];
        const formData = new FormData();
        formData.append("file", filePath);
        // ajax之后在赋值
        document.querySelector("input[prop=file1]").value = filePath.name;
        document.querySelector("#onUploadText").innerText = filePath.name;
      });
    });
    function upload(callback) {
      const input = document.createElement("input");
      input.type = "file";
      document.body.appendChild(input);
      input.click();
      // 上传结束之后，删除此图标
      input.remove();
      input.onchange = function (val) {
        if (callback) callback(val);
      };
    }
    window.save = save;
  </script>
</html>
